<template>
  <div id="pageHeader" class="container-fluid">
    <div class="logo">
      <div class="icon"></div>
      <span class="logo_text">{{ project.Chinese }}</span>
      <div class="positioning">
        <el-popover placement="bottom" :width="400" trigger="hover">
          <template #reference>
            <el-button class="positioning-lo">
              {{ position }}
              <el-icon color="#337ecc">
                <Promotion/>
              </el-icon>
            </el-button>
          </template>
          <el-tabs v-model="activityName">
            <el-tab-pane label="热门城市" name="one">
              <el-row v-for="items in hotCity" style="margin-bottom: 10px">
                <el-col :span="4" v-for="item in items">
                  <el-link :underline="false" @click="positing(item.city)">
                    {{ item.city }}
                  </el-link>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="太多了" name="two">None</el-tab-pane>
            <el-tab-pane label="不想写" name="three">None</el-tab-pane>
          </el-tabs>
        </el-popover>
      </div>
    </div>
    <el-input ref="search_input"
              v-model="searchInput"
              class="w-50 m-2 search_input"
              placeholder="输入目的地/景点">
      <template #append>
        <el-button @click="searchButton" type="primary" color="#67C23A">
          <el-icon style="vertical-align: middle" color="#67C23A">
            <Search/>
          </el-icon>
          <span style="vertical-align: middle; color: #67C23A"> Search </span>
        </el-button>
      </template>
    </el-input>
    <login></login>
  </div>
</template>

<script>
import {getCurrentInstance, ref} from 'vue'
import {Search, Promotion} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus';
import {useStore} from 'vuex';
import Login  from './Login.vue'

export default {
  name: "HeaderWrapper",
  components: {
    Search,
    Promotion,
    Login
  },
  setup() {
    const store = useStore()
    const project = store.state.projectLogo
    let activityName = ref('one')
    let searchInput = ref('')
    let position = ref(store.state.orientation)
    const instance = getCurrentInstance()
    const hotCity = [
      [
        {
          city: '北京'
        },
        {
          city: '上海'
        },
        {
          city: '深圳'
        },
        {
          city: '广州'
        },
        {
          city: '灵山'
        },
        {
          city: '玉林'
        }
      ],
      [
        {
          city: '北海'
        },
        {city: '苏州'}
      ]
    ]

    // 搜索功能
    const searchButton = () => {
      if (searchInput.value === '') {
        ElMessage({
          message: '请输入城市',
          type: 'warning',
        })
        instance.ctx.$refs.search_input.focus()
      } else {
        store.commit('Search', searchInput.value)
      }
    }

    // 定位功能
    function positing(city) {
      position.value = city
      store.state.orientation = city
    }

    return {
      searchInput,
      position,
      activityName,
      hotCity,
      project,
      searchButton: searchButton,
      positing,
    }
  }
}
</script>

<style scoped>
.positioning {
  margin-right: 0;
  margin-left: 10px;

}

.logo {
  width: 300px;
  height: 80px;
  display: flex;
  align-items: center;
  position: absolute;
  left: 15%;
}

.logo_text {
  font-size: 28px;
  margin-left: 10px;
  color: #13227a;
  /*font-family: "alimama",fantasy;*/
  font-family: "仓耳渔阳体 W04", fantasy;
  font-weight: 400;
}

.icon {
  position: relative;
  width: 56px;
  height: 56px;
  /*background: red;*/
  background: url(../../assets/logo.svg) no-repeat;
  display: inline-block;
  margin-left: 2px;
  background-size: contain !important;
  background-position: 50% !important;
}

.positioning-lo {
  height: 40px;
  background-color: #d1edc4;
  border: 0;
  font-size: 18px;
  color: #666;
}

.positioning-lo:hover {
  background-color: #FFFFFF;
}

#pageHeader {
  min-width: 1500px;
  height: 140px;
  background-color: #d1edc4;
  display: flex;
  justify-content: center;
  align-items: center;
}


.search_button {
  width: 45px;
  height: 20px;
  font-size: 0.02em;
}

.search_input {
  position: relative;
  left: 100px;
  height: 40px;
  width: 600px;
}

button {
  background-color: #67C23A;
}

</style>